<template>
    <h2>{{ userName }}</h2>
    <h3>{{ age }}</h3>
</template>

<script>
import { computed,inject } from 'vue';
export default{
    /*定义了三个 prop：firstName、lastName 和 age。这些 prop 会被父组件传递给当前组件。
      每当props从外部发生变化时, 这种变化都会传播到setup方法并进行计算, 例如,
      将获取props的变化, 并重新计算uName｡
      道具是反应性的, 不是其中的单个值, 而是作为一个整体的道具对象｡
      因此, 每当props对象作为一个整体发生变化时, 只要其中一个prop发生变化,
      Vue就会注意到这一点, 并将重新运行依赖于props的任何代码｡
    */
    props: ['firstName','lastName'],
    //使用 composition API
    setup(props,context){
        const uName = computed(function(){
            return props.firstName+ ' '+props.lastName;
        });

        /*
        inject 函数:
        1.inject 函数允许你从祖先组件中注入一个值。
        在这里，我们注入了一个名为 userAge 的值（从App组件中来），这个值应该由祖先组件通过 provide 提供。
        2.inject 的工作原理:
        当一个组件使用 inject 注入数据时，它会查找最近的祖先组件中提供的同名值。
        如果找到了匹配的值，inject 将返回这个值；如果没有找到，则返回 undefined
        */
        const age = inject('userAge');
       

        console.log(context);
        return { userName: uName,age };  
    }
}
</script>
